<script lang="ts" setup>
  import { ref } from 'vue';
  import { OrderBusinessTypes } from '@/config/finance';
  import _ from 'lodash';
  import { UserOrderSearchParams } from '@/types/finance';

  const data = ref<UserOrderSearchParams>({});

  const emit = defineEmits(['submit']);

  const handleConfirm = () => {
    const clonedData = _.cloneDeep(data.value);
    if (clonedData.gmtCreateRange) {
      clonedData.gmtCreateSpan = `${clonedData.gmtCreateRange[0]}TO${clonedData.gmtCreateRange[1]}`;
      delete clonedData.gmtCreateRange;
    }
    if (!clonedData.number) {
      delete clonedData.number;
    }
    if (!clonedData.refundStatus) {
      delete clonedData.refundStatus;
    }
    emit('submit', clonedData);
  };

  const handleReset = () => {
    data.value = {};
    emit('submit', {});
  };
</script>

<template>
  <a-form :model="data" layout="vertical">
    <a-row :gutter="12">
      <a-col :flex="1">
        <a-row :gutter="12">
          <!--          <a-col :span="8">-->
          <!--            <a-form-item hide-label field="userId">-->
          <!--              <a-input v-model="data.userId" allow-clear>-->
          <!--                <template #prefix>用户</template>-->
          <!--              </a-input>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->

          <a-col :span="6">
            <a-form-item hide-label field="business">
              <a-input v-model="data.number" allow-clear>
                <template #prefix>订单号</template>
              </a-input>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item hide-label field="business">
              <a-select
                v-model="data.business"
                allow-clear
                :options="
                  OrderBusinessTypes.map((value, index) => ({
                    label: value,
                    value: index,
                  }))
                "
              >
                <template #prefix>类型</template>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item hide-label field="gmtCreateRange">
              <a-range-picker
                v-model="data.gmtCreateRange"
                allow-clear
                :placeholder="['开始时间', '结束时间']"
              />
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item hide-label field="refundStatus">
              <a-select
                v-model="data.refundStatus"
                allow-clear
                :options="[
                  {
                    value: 'SUCCESS',
                    label: '退款成功',
                  },
                  {
                    value: 'CLOSED',
                    label: '已关闭',
                  },
                  {
                    value: 'PROCESSING',
                    label: '退款中',
                  },
                  {
                    value: 'ABNORMAL',
                    label: '异常',
                  },
                ]"
              >
                <template #prefix>退款状态</template>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-col>
      <a-col flex="none" style="width: 160px">
        <a-space>
          <a-button type="primary" @click="handleConfirm"> 搜索 </a-button>
          <a-col><a-button @click="handleReset">重置</a-button></a-col>
        </a-space>
      </a-col>
    </a-row>
  </a-form>
</template>
